<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-card-border"
      style="max-width: 300px;"
    >
      <div
        class="ant-pro-card-body"
      >
        Content
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProCard Headless Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            style
          </strong>
          : 卡片样式对象，设置最大宽度
        </li>
        <li>
          <strong>
            children
          </strong>
          : 卡片内容
        </li>
      </ul>
      <h4>
        Headless 特点：
      </h4>
      <ul>
        <li>
          <strong>
            无标题
          </strong>
          : 不设置 title 属性，卡片没有标题区域
        </li>
        <li>
          <strong>
            简洁设计
          </strong>
          : 只显示内容区域，界面更加简洁
        </li>
        <li>
          <strong>
            灵活布局
          </strong>
          : 适合作为容器组件使用
        </li>
      </ul>
      <h4>
        样式配置：
      </h4>
      <ul>
        <li>
          <strong>
            maxWidth
          </strong>
          : 设置最大宽度，避免在大屏幕上过宽
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 在小屏幕上会自动调整宽度
        </li>
      </ul>
      <h4>
        与其他类型的区别：
      </h4>
      <ul>
        <li>
          <strong>
            有标题卡片
          </strong>
          : 设置 title 属性，显示标题区域
        </li>
        <li>
          <strong>
            无标题卡片
          </strong>
          : 不设置 title 属性，只显示内容
        </li>
        <li>
          <strong>
            分割卡片
          </strong>
          : 使用 split 属性进行分割布局
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            内容容器
          </strong>
          : 作为内容的容器组件
        </li>
        <li>
          <strong>
            布局组件
          </strong>
          : 用于页面布局和内容分组
        </li>
        <li>
          <strong>
            信息展示
          </strong>
          : 展示简单的信息内容
        </li>
        <li>
          <strong>
            表单容器
          </strong>
          : 作为表单的容器组件
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            内容清晰
          </strong>
          : 确保内容本身能够表达其用途
        </li>
        <li>
          <strong>
            样式合理
          </strong>
          : 根据内容设置合适的样式
        </li>
        <li>
          <strong>
            响应式设计
          </strong>
          : 考虑在不同屏幕尺寸下的显示效果
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>